<template>
  <div class="layout-wrapper layout-witness">
    <div class="layout-header layout-search">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="项目类型">
          <el-select
            v-model="searchForm.hytype"
            class="ui-w160"
            option-max-width="160px"
            placeholder="请选择"
            clearable
            @change="handleSearch()"
          >
            <el-option v-for="(value, key) in hytypelist" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="交易类型">
          <el-select
            v-model="searchForm.jylx"
            class="ui-w160"
            option-max-width="160px"
            placeholder="请选择"
            clearable
            @change="handleSearch()"
          >
            <el-option v-for="(value, key) in jyfstypelist" :key="key" :label="value" :value="key" />
          </el-select>
        </el-form-item>
<!--        <el-form-item label="资审方式">-->
<!--          <el-select-->
<!--            v-model="searchForm.scfs"-->
<!--            class="ui-w160"-->
<!--            option-max-width="160px"-->
<!--            placeholder="请选择"-->
<!--            clearable-->
<!--            @change="handleSearch()"-->
<!--          >-->
<!--            <el-option v-for="(value, key) in scfstypelist" :key="key" :label="value" :value="key" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="见证状态">-->
<!--          <el-select-->
<!--            v-model="searchForm.taskstatus"-->
<!--            class="ui-w130"-->
<!--            option-max-width="130px"-->
<!--            placeholder="请选择"-->
<!--            clearable-->
<!--            @change="handleSearch()"-->
<!--          >-->
<!--            <el-option v-for="item in witnessStatusOptions" :key="item.value" :label="item.label" :value="item.value" />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item label="开标时间">
          <el-date-picker
            v-model="searchForm.date"
            class="ui-w260"
            unlink-panels
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :clearable="false"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="handleSearch()"
          />
        </el-form-item>
        <el-form-item>
          <el-input
            v-model.trim="searchForm.keyword"
            class="ui-w210"
            placeholder="项目/标段/名称/编号"
            @keyup.native.enter="handleSearch()"
          >
            <el-button slot="append" type="primary" icon="icon-sousuo" @click="handleSearch()" />
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="layout-body">
      <el-table ref="taskTable" v-loading="tableLoading" :data="tableData" height="100%" stripe>
        <el-table-column type="index" align="left" label="序号" width="50">
          <template slot-scope="scope">
            {{ pageObj.currentPage * pageObj.pageSize + 1 + scope.$index }}
          </template>
        </el-table-column>
        <el-table-column prop="[0].name" label="标段名称"/>
        <el-table-column prop="[0].code" label="标段编号"/>
        <el-table-column prop="[0].xm.name" label="项目名称"/>
<!--        <el-table-column prop="[0].xm.xmlx" label="项目类型"/>-->
<!--        <el-table-column prop="[0].xm.cgfs" label="交易类型"/>-->
<!--        <el-table-column prop="[0].xm.scfs" label="资审方式"/>-->
        <el-table-column
          prop="[0].xm.xmlx"
          label="项目类型"
          :formatter="formatterXmlx"
          show-overflow-tooltip
        />
        <el-table-column
          prop="[0].xm.jylx"
          label="交易类型"
          :formatter="formatterjylx"
          show-overflow-tooltip
        />
        <el-table-column prop="[0].kbtime" label="开标时间"/>
<!--        <el-table-column-->
<!--          prop="[2].taskstatus"-->
<!--          label="见证状态"-->
<!--          :formatter="formatterTaskstatus"-->
<!--          show-overflow-tooltip-->
<!--        />-->
<!--        <el-table-column-->
<!--          prop="[0].xm.scfs"-->
<!--          label="资审方式"-->
<!--          :formatter="formatterscfs"-->
<!--          show-overflow-tooltip-->
<!--        />-->
<!--        <el-table-column prop="[0].xm.bajgbm" label="备案监管部门"/>-->
<!--        <el-table-column prop="[0].xm.xmlxr" label="经办人"/>-->
        <el-table-column label="操作" align="center" header-align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="default" @click="viewData(scope.row)"> 项目详情 </el-button>
            <el-button type="text" size="default" @click="userManager(scope.row)"> 人员信息管理 </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="layout-footer">
      <wpagination
        v-if="pageObj.total > pageObj.pageSizes[0]"
        :total="pageObj.total"
        :page.sync="pageObj.currentPage"
        :limit.sync="pageObj.pageSize"
        :pageSizes="pageObj.pageSizes"
        @pagination="projectListFn()"
      />
    </div>
    <el-dialog title="项目信息" :visible.sync="xminfo.show" width="60%">
      <el-descriptions title="" :column="2" border>
        <el-descriptions-item label="招标项目名称" :span="2">{{xminfo.xm.name}}</el-descriptions-item>
        <el-descriptions-item label="招标项目编号">{{xminfo.xm.code}}</el-descriptions-item>
        <el-descriptions-item label="招标项目类型">{{xminfo.xm.xmlx | xmlxFilter}}</el-descriptions-item>
        <!--        <el-descriptions-item label="项目类别">{{xminfo.xm.jylx}}</el-descriptions-item>-->
        <el-descriptions-item label="项目审批文号">{{xminfo.xm.spcode}}</el-descriptions-item>
        <el-descriptions-item label="招标方式">{{xminfo.xm.cgfs | zbfsFilter}}</el-descriptions-item>
        <el-descriptions-item label="资格审查方式">{{xminfo.xm.scfs | scfsFilter}}</el-descriptions-item>
        <el-descriptions-item label="项目所在行政区域">{{xminfo.xm.xmaddress}}</el-descriptions-item>
        <el-descriptions-item label="监督部门名称">{{xminfo.xm.jgzt}}</el-descriptions-item>
        <el-descriptions-item label="审核部门名称">{{xminfo.xm.spdw}}</el-descriptions-item>
        <el-descriptions-item label="是否电子标">
          <template v-if="xminfo.xm.dzbstate == 1">是</template>
          <template v-else>否</template>
        </el-descriptions-item>
        <el-descriptions-item label="预算（元）">{{xminfo.xm.ysje}}</el-descriptions-item>
        <el-descriptions-item label="控制价（元）">{{xminfo.xm.maxprice}}</el-descriptions-item>
        <el-descriptions-item label="招标人">{{xminfo.xm.zcdwname}}</el-descriptions-item>
        <el-descriptions-item label="招标人代码">{{xminfo.xm.zcdwcode}}</el-descriptions-item>
        <el-descriptions-item label="招标联系人">{{xminfo.xm.zcdwlxr}}</el-descriptions-item>
        <el-descriptions-item label="招标联系人电话">{{xminfo.xm.zcdwmobile}}</el-descriptions-item>
        <el-descriptions-item label="招标代理">{{xminfo.xm.zcdlname}}</el-descriptions-item>
        <el-descriptions-item label="招标代理信用代码">{{xminfo.xm.zcdlcode}}</el-descriptions-item>
        <el-descriptions-item label="招标代理联系人">{{xminfo.xm.zcdllxr}}</el-descriptions-item>
        <el-descriptions-item label="招标代理联系人电话">{{xminfo.xm.zcdlmobile}}</el-descriptions-item>
        <el-descriptions-item label="附件">
          <div v-for="(item, index)  in xminfo.xm.fjList">
            <a :href="item.fjurl" target="_blank">{{item.fjname}}</a>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
  import { list } from "../../../../../../api/weeon/task/gly/list";
  export default {
    filters:{
      scfsFilter(key) {
        const dataMap = {
          '1': '资格预审',
          '2': '资格后审',
        }
        return dataMap[key]
      },
      zbfsFilter(key) {
        const dataMap = {
          '1': '公开招标',
          '2': '邀请招标',
        }
        return dataMap[key]
      },
      xmlxFilter(key) {
        const dataMap = {
          'A01': '房建',
          'A02': '市政',
          'A03': '公路',
          'A04': '铁路',
          'A06': '水运',
          'A07': '水利',
          'A0801': '煤炭',
          'A0802': '石油',
          'A0803': '天然气',
          'A0804': '电力',
          'A0805': '新能源',
          'A09': '邮电通信',
          'A12': '矿产冶金',
          'A13': '信息网络',
          'A9901': '林业',
          'A9902': '农业',
          'A9903': '其他',
        }
        return dataMap[key]
      }
    },
    data() {
      // 这里存放数据
      return {
        tableData: [],
        xminfo: {show: false,xm: {}},
        tableLoading: false,
        pageObj: {
          total: 0,
          currentPage: 0,
          pageSize: 10,
          pageSizes: [10, 20, 30]
        },
        searchForm: {
          keyword: "",
          hytype: "",
          jylx:"",
          scfs: "",
          taskstatus: "",
          date: ""
        },
        hytypelist: [],
        jyfstypelist: [],
        scfstypelist: [],
        witnessStatusOptions: [
          {
            value: "YWC",
            label: "已完成"
          }, // 已完成 = 待审核(WITNESS_UN_REVIEWED)和已见证(WITNESS_FINISHED)，利用已见证的code查询，其实返回的同时包含已见证和待审核
          {
            value: "JZZ",
            label: "见证中"
          }, // 见证中 = 见证中(WITNESSING)
          {
            value: "DJZ",
            label: "未开始"
          } // 未开始 = 已分配(ASSIGNED)
        ], // 见证状态下拉
        pickerOptions: {
          shortcuts: [
            {
              text: "最近一周",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近一个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                picker.$emit("pick", [start, end]);
              }
            },
            {
              text: "最近三个月",
              onClick(picker) {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                picker.$emit("pick", [start, end]);
              }
            }
          ]
        }
      };
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
      this.projectListFn();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    // 生命周期 - 销毁之前
    beforeDestroy() {},
    // 生命周期 - 销毁完成
    destroyed() {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated() {},
    methods: {
      //格式化项目类型
      formatterTaskstatus(row, col, val){
        let str = "";
        if (val) {
          const dataMap = {
            'YWC': '已完成',
            'JZZ': '见证中',
            'DJZ': '未开始'
          }
          str = dataMap[val]
        }
        return str;
      },
      formatterXmlx(row, col, val){
        let str = "";
        if (val) {
          str = this.hytypelist[val];
        }
        return str;
      },
      formatterjylx(row, col, val){
        let str = "";
        if (val) {
          str = this.jyfstypelist[val];
        }
        return str;
      },
      formatterscfs(row, col, val){
        let str = "";
        if (val) {
          const dataMap = {
            '1': '资格预审',
            '2': '资格后审',
          }
          str = dataMap[val]
        }
        return str;
      },
      viewData(xm){
        debugger
        this.xminfo.show = true;
        this.xminfo.xm = xm[1];
      },

      // 数据列表
      async projectListFn() {
        try {
          this.tableLoading = true;
          this.tableData = [];
          let params = {
            keyword: this.searchForm.keyword,
            hytype: this.searchForm.hytype,
            jylx: this.searchForm.jylx,
            scfs: this.searchForm.scfs,
            taskstatus: this.searchForm.taskstatus,
            pageNo: this.pageObj.currentPage,
            pageSize: this.pageObj.pageSize,
          };
          if (this.searchForm.date && this.searchForm.date.length) {
            params.beginkbtime = `${this.searchForm.date[0]} 00:00:00`;
            params.endkbtime = `${this.searchForm.date[1]} 23:59:59`;
          } else {
            params.startTime = "";
            params.endTime = "";
          }
          const res = await list(params);
          this.tableLoading = false;
          if (res.stat === 1) {
            //alert(JSON.stringify(res.data));
            this.hytypelist = res.data.hytypes;
            this.jyfstypelist = res.data.jyfstypes;
            this.scfstypelist = res.data.scfstypes;
            if (res.data.page.totalElements === 0 && this.pageObj.currentPage !== 0) {
              this.pageObj.currentPage = 0;
              this.$nextTick(() => {
                this.projectListFn();
              });
              return;
            }
            this.tableData = res.data.page.content;
            this.pageObj.total = res.data.page.totalElements;
          } else {
            this.$message({
              type: "error",
              message: res.msg || "获取数据失败，请稍后再试",
              single: true
            });
          }
        } catch (error) {
          console.log(error);
          this.tableLoading = false;
        }
      },
      handleSearch() {
        this.pageObj.total = 0;
        this.pageObj.currentPage = 0;
        this.projectListFn();
      },
      //人员信息管理
      userManager(row) {
        let bdguid = row[0].guid;
        this.$router.push({ path: "/jdry", query: { bdguid } });
      }
    }
  }
</script>
<style lang="scss" scoped>
  .status-list {
    padding-top: 18px;
    span {
      padding-left: 20px;
      font-size: 12px;
      &::before {
        content: "";
        display: inline-block;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: 5px;
        margin-top: -2px;
      }
    }
    .completed::before {
      background-color: #56b502;
    }
    .inWitness::before {
      background-color: #1890ff;
    }
    .notStarted::before {
      background-color: #b2b2b2;
    }
  }
  ::v-deep.progress-list {
    .el-step {
      height: 26px;
      line-height: 26px;
      &::before {
        border-width: 13px;
      }
      &::after {
        border-width: 13px;
        right: -26px;
      }
      .cell {
        padding: 0 6px;
      }
      .el-step__title {
        line-height: 26px;
        text-align: center;
        i {
          color: #fc9306;
          // background-color: #fff;
        }
      }
    }
    // 已完成状态
    .status-completed {
      cursor: pointer;
      background: rgba(86, 181, 2, 0.2);
      &::after {
        border-left-color: rgba(86, 181, 2, 0.2);
      }
      .el-step__title {
        color: #56b502;
      }
    }
    .status-completed:hover {
      background: rgba(86, 181, 2);
      &::after {
        border-left-color: rgba(86, 181, 2);
      }
      .el-step__title {
        color: #fff;
      }
    }
    // 见证中状态
    .status-inWitness {
      cursor: pointer;
      background: rgba(24, 144, 255, 0.2);
      &::after {
        border-left-color: rgba(24, 144, 255, 0.2);
      }
      .el-step__title {
        color: #1890ff;
      }
    }
    .status-inWitness:hover {
      background: rgba(24, 144, 255);
      &::after {
        border-left-color: rgba(24, 144, 255);
      }
      .el-step__title {
        color: #fff;
      }
    }
    // 未开始状态
    .status-notStarted {
      background: rgba(153, 153, 153, 0.2);
      &::after {
        border-left-color: rgba(153, 153, 153, 0.2);
      }
    }
  }
</style>
